<!-- 
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2021/07/11 05:49:14
  @file: Todos.vue
  @description:
  ```
  基于 Vue3 的Todo list
  ```
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="vue-todo-list">
    <edit-todo
      v-model:todo-title="newTodo"
      autofocus
      placeholder="新增今日待办"
      autocomplete="off"
      @keyup.enter="addTodo"
    />
    <!-- todo 列表 -->
    <ul>
      <todo-item
        v-for="todo in filterdTodos"
        :key="todo.id"
        v-model:edited-todo="editedTodo"
        :todo="todo"
        @remove-todo="removeTodo"
      ></todo-item>
    </ul>

    <!-- 过滤 -->
    <Filter v-model="visibility" :items="filterItems" />
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import TodoItem from "./TodoItem.vue";
import Filter from "./Filter.vue";
import { useTodos } from "./useTodos";
import { useFilter } from "./useFilter";

export default {
  name: "Todos",
  components: {
    TodoItem,
    Filter,
  },
  setup() {
    const todoState = reactive({
      newTodo: "",
      editedTodo: null, // 正在编辑的 todo
    });
    const { todos, addTodo, removeTodo } = useTodos(todoState);
    const filterState = useFilter(todos);
    return {
      ...toRefs(todoState),
      ...toRefs(filterState),
      addTodo,
      removeTodo,
    };
  },
};
</script>

<style scoped></style>
